<!DOCTYPE html>
<html lang="en">

    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>校园e网通--登录</title>

        <!-- CSS -->
        <link rel="stylesheet" href="assets/css/googleapis.css">
        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="assets/css/form-elements.css">
        <link rel="stylesheet" href="assets/css/style.css">
        <script src="assets/js/jquery-1.10.2.js"></script>
        
       
        <script type="text/javascript">
        $(function(){
        	getCode();
           
        });
        function getCode(){ $.ajax({
            url:'random.action',
            success:function(data){
                console.log(data);
                $("#yzms").attr("value",data);
                drawPic();
            }
        })}
        function randomNum(min,max){
            return Math.floor( Math.random()*(max-min)+min);
        }
        function randomColor(min,max){
            var r = randomNum(min,max);
            var g = randomNum(min,max);
            var b = randomNum(min,max);
            return "rgb("+r+","+g+","+b+")";
        }
        /**绘制验证码图片**/
        function drawPic() {
            var canvas = document.getElementById("canvas");
            var width = canvas.width;
            var height = canvas.height;
            var ctx = canvas.getContext('2d');
            ctx.textBaseline = 'bottom';

            /**绘制背景色**/
            ctx.fillStyle = randomColor(180, 240); //颜色若太深可能导致看不清
            ctx.fillRect(0, 0, width, height);
            /**绘制文字**/

            
            var txt = $("#yzms").attr("value");
            ctx.fillStyle = randomColor(50, 160);  //随机生成字体颜色
            ctx.font = randomNum(20, 25) + 'px SimHei'; //随机生成字体大小
            var x = 20;
            var y = randomNum(25, 35);
            var deg;
            if (y<=30) {
            	 deg = randomNum(-5, 25);
			}
            if (y>30) {
            	 deg = randomNum(-25, 1);
			}
            
            //修改坐标原点和旋转角度
            ctx.translate(x, y);
            ctx.rotate(deg * Math.PI / 180);
            ctx.fillText(txt, -3, -3);
            //恢复坐标原点和旋转角度
            ctx.rotate(-deg * Math.PI / 180);
            ctx.translate(-x, -y);
            /*    } */
            /* /**绘制干扰线**/
            for (var i = 0; i < 8; i++) {
                ctx.strokeStyle = randomColor(40, 180);
                ctx.beginPath();
                ctx.moveTo(randomNum(0, width), randomNum(0, height));
                ctx.lineTo(randomNum(0, width), randomNum(0, height));
                ctx.stroke();
            }
        }
    function login(){
    	var verycode=$("#veryCode").val();
    	var yzms=$("#yzms").val();
    	
	if (verycode.toLowerCase()==yzms.toLowerCase()) {
		
			$.ajax({
				
				url:'PIClogin.action',
				type:'post',
				data:{
					username:$("#userName").val(),
					password:$("#passWord").val()
					
				},
				success:function(data){
					if (data=="index") {
						location.href="index.html";
					} else if(data =="loss"){
						$("#codediv").html(" ");
						$("#codediv").html("该用户已挂失");
						getCode();
					}else{
						$("#codediv").html(" ");
						$("#codediv").html("用户名或密码错误");
						getCode();
					}
					
					
				}
				
			})
		
			
		
	}else{
        //alert("error");
        $("#codediv").html(" ");
        $("#codediv").html("验证码错误");
        getCode();
		
	}
    }
   
    </script>



    </head>

    <body>

        <!-- Top content -->
        <div class="top-content">
        	
            <div class="inner-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-8 col-sm-offset-2 text">
                            <h1><strong>校园e网通  </strong>登录</h1>
                            <div class="description">
                            	<p>
	                            	欢迎进入校园e网通

                            	</p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3 form-box">
                        	<div class="form-top">
                        		<div class="form-top-left">
                        			<h3>登录</h3>
                            		<p>请输入用户名、密码</p>
                        		</div>
                        		<div class="form-top-right">
                        			<i class="fa fa-lock"></i>
                        		</div>
                            </div>
                            <div class="form-bottom">
			                    <form role="form" action="" method="post" class="login-form">
			                    	<div class="form-group">
			                    		<label class="sr-only" for="form-username">Username</label>
			                        	<input type="text" name="username" placeholder="用户名" class="form-username form-control" id="userName">
			                        </div>
			                        <div class="form-group">
			                        	<label class="sr-only" for="form-password">Password</label>
			                        	<input type="password" name="password" placeholder="密码" class="form-password form-control" id="passWord">
			                        </div>
			                        <div class="form-group">
			                        	<label class="sr-only" for="form-password">Code</label>
			                        	<input type="text" name="form-yzm"  id="veryCode" placeholder="验证码" class="form-password form-control" id="yzm" style="width: 50%;float: left;" >
			                        <!-- 验证码区 -->
			                        <div style="float: left;margin-left: 40px">	<canvas id="canvas" width="70" height="34" onclick="getCode()"></canvas><a href="javascript:getCode();" id="img"  style="line-height: 34px;text-indent: 10px; float: right; " >换一张</a>
                                <input type="text"  id="yzms" name="yzms" readonly = "readonly" style="display: none"> 
                                <div id="codediv" style="height: 20px;width: 200px;" ></div></div>
			                        </div>
			                        <button type="button" class="btn" onclick="login()">登录</button>
			                       
			                        <a href="register.html" style="float: right;">注册</a>
			                       
			                    </form>
		                    </div>
                        </div>
                    </div>

                </div>
            </div>
            
        </div>


        <!-- Javascript -->
        <script src="assets/js/jquery-1.11.1.min.js"></script>
        <script src="assets/bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/js/jquery.backstretch.min.js"></script>
        <script src="assets/js/scripts.js"></script>
        


    </body>

</html>